<template>
	<view>
		<view class="digitalidentity" style="margin-bottom: 20rpx;">
			
			<text class="text-title">
				
				若尚未领取《工会法人资格证书》，请使用职工之家APP首页“工会工作者服务区”中“组织入驻”功能，提交申请。
				
			</text>
			
			<uni-title type="h4" title="法人代表身份证照片或扫描件"></uni-title>
			
			<Rboy-upload-sfz :obverse-url="formData.obverseUrl" :reverse-url="formData.reverseUrl" @selectChange="sfz_chagne" @del="del_btn"></Rboy-upload-sfz>
				
		</view>
		<view class="digitalidentity">
			<view class="label-model border-b">
				<text class="label">法定代表人姓名</text>
				<text class="model">{{formData.name}}</text>
			</view>
			<view class="label-model">
				<text class="label">法定代表人身份证号</text>
				<text class="model">{{formData.idcard}}</text>
			</view>
		</view>
		<view class="footer margin-t">
			<uni-title style="padding-left: 32rpx;" class="digitalidentity-text" type="h4"
				title="《工会法人资格证书》扫描件"></uni-title>
			<view class="otherimg margin-b border-b">
				<image class="otherimg-1" :src="formData.otherUrl ? formData.otherUrl : otherImg" @click="selectImg"
					mode="">
				</image>
				<image class="del_btn" :src="del" mode="" v-if="formData.otherUrl" @click="del_btn('otherImg')"></image>
			</view>
			<view class="label-model margin-t border-t">
				<text style="padding-left: 32rpx;" class="label">工会名称</text>
				<view class="input-flex">
					<input class="input" placeholder="请填写您的工会组织的完整名称" :value="formData.Unionname" @input="clearInput" />
					<uni-icons type="closeempty" size="15" class="input-icon" v-if="showClearIcon"
						@click="clearIcon"></uni-icons>
				</view>
			</view>
		</view>
		<view class="btn">
			<button class="button" @click="gounionsettlementfotmtitel">提交申请</button>
		</view>
	</view>
</template>

<script>
	import {
		setInitiateMembershipApproval
	} from "../../api/work/digitalidentity";
	import {
		uploadfileFn
	} from "@/api/upload/index.js";
	import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
	import zigezhengshu from "@/static/images/zigezhengshu.png";

	export default {
		components: {
			RboyUploadSfz,
		},
		data() {
			return {
				otherImg: zigezhengshu,
				formData: {
					obverseUrl: "",
					reverseUrl: "",
					otherUrl: "",
					name: "张三",
					idcard: "741822963741852963",
					Unionname: ""
				},
				showClearIcon: false,
			}
		},

		methods: {
			gounionsettlementfotmtitel() {
				console.log(this.formData);
				setInitiateMembershipApproval(this.formData).then(res => {
					console.log(res);
				}).catch(err => {
					console.log(err);
				})
				this.$tab.navigateTo(`/pages/work/unionsettlement-form-title`)
			},
			clearInput: function(event) {
				this.formData.name = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.formData.name = '';
				this.showClearIcon = false;
			},
			sfz_chagne(e) {

				uploadfileFn(e.tempFilePath).then(res => {
					if (e.name == "obverse") {
						this.formData.obverseUrl = res.data.url
					} else if (e.name == "reverse") {
						this.formData.reverseUrl = res.data.url
					}
					console.log(res);
				}).catch(() => {
					console.log("上传失败");
				})
			},
			// 删除
			del_btn(e) {
				if (e.name == "obverse") {
					this.formData.obverseUrl = ""
				} else if (e.name == "reverse") {
					this.formData.reverseUrl = ""
				}
			},

			selectImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// 直接调用 uploadfileFn，无需重新声明
						uploadfileFn(res.tempFilePaths[0])
							.then(res => {
								this.formData.otherUrl = res.data.url
							})
							.catch((err) => {
								console.log("上传失败", err);
							});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.digitalidentity-text {
		padding: 32rpx;

	}

	.digitalidentity {
		background-color: #fff;
		padding: 16rpx 32rpx;

	}

	.footer {
		background-color: #fff;

	}


	.otherimg {
		width: 680rpx;
		height: 344rpx;
		text-align: center;
		margin: 0 auto;

		.otherimg-1 {
			width: 100%;
			height: 100%;
		}
	}

	.text-title {
		color: #7b7b7b;
		font-size: 28rpx;
		width: 90%;
	}

	.label-model {
		display: flex;
		padding: 16rpx;
		background-color: #fff;

		.label {
			flex: 1;
			color: #333333;
			font-weight: bold;
		}

		.model {
			flex: 1;
		}
	}


	.input-flex {
		flex: auto;
		display: flex;

		.input {
			flex: auto;
		}

		.input-icon {
			margin-top: 8rpx;
		}
	}
</style>